<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>幸运在握 世界由我</title>
    <link rel="icon" href="./favicon.ico" />
    <link rel="stylesheet" href="./index.css">
    <meta name="description" content="瑞幸咖啡7周年">
</head>

<body>
    <img src="./favicon.ico" alt="">
    <div>
        <img class="top" src="./img/top.png" alt="">
        <form class="datas">
            <div>
                <div>工 号</div>
                <input type="text" name="user_code">
            </div>
            <div>
                <div>手机号</div>
                <input type="number" name="phone">
            </div>
            <div class="name_gender">
                <div class="name_box" style="width: 70%;">
                    <div>姓 名</div>
                    <input type="text" name="user_name">
                </div>
                <div class="name_box" style="width: 25%;">
                    <div>姓 别</div>
                    <select name="gender">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </div>
            </div>
            <div>
                <div>选择base地</div>
                <select name="base_name">
                    <!-- <option value="北京">北京</option> -->
                    <option value="上海">上海</option>
                    <!-- <option value="厦门">厦门</option> -->
                </select>
            </div>

        </form>
        <div class="tijiao_box">
            <img class="tijiao" src="./img/ok.png" alt="">
        </div>
        <img class="wenxin" src="./img/wenxin.png" alt="">
        <img class="bottom" src="./img/bottom.png" alt="">
    </div>
    <div class="msg_box">
        <div class="msg"></div>
    </div>
    <script src="./jquery.js"></script>
    <script>
       
        var time = null
        function showMsg(text, close) {
            if (time) {
                clearInterval(time)
                clearTimeout(time)
                time = null
            }
            $(".msg_box").addClass("msg_box_show")
            $(".msg").html(text)
            time = setTimeout(() => {
                $(".msg_box").removeClass("msg_box_show")
                if(close){
                    window.WeixinJSBridge.call('closeWindow') // 微信
                }
            }, 2000);
        }
        function validatePhoneNumber(phoneNumber) {
            var pattern = /^1[3456789]\d{9}$/;
            return pattern.test(phoneNumber);
        }
        function throttle(fn, interval) {
            // 1.记录上一次的开始时间
            var lastTime = 0
            // 2.事件触发时, 真正执行的函数
            var _throttle = function () {
                var args = arguments;
                // 2.1.获取当前事件触发时的时间
                var nowTime = new Date().getTime()
                // 2.2.使用当前触发的时间和之前的时间间隔以及上一次开始的时间, 计算出还剩余多长时间需要去触发函数
                var remainTime = interval - (nowTime - lastTime)
                //第一次会执行，原因是nowTime刚开始是一个很大的数字，结果为负数
                //若最后一次没能满足条件，不会执行
                if (remainTime <= 0) {
                    // 2.3.真正触发函数
                    fn.apply(this, args)
                    // 2.4.保留上次触发的时间
                    lastTime = nowTime
                } else {
                    console.log("节流中")
                }
            }
            return _throttle
        }
        function clickFun() {
            var formData = {};
            $('.datas').find('input, select, textarea').each(function () {
                formData[$(this).attr('name')] = $(this).val();
            });
            if (!formData.user_name) {
                showMsg('请输入用户名')
            } else if (!formData.phone) {
                showMsg('请输入手机号')
            } else if (!validatePhoneNumber(formData.phone)) {
                showMsg('手机号错误')
            } else if (!formData.user_code) {
                showMsg('请输入工号')
            } else {
                $.post("/rxapi/add", formData, function (res) {
                    if (res.code == 200) {
                        showMsg(res.msg, true)
                    } else {
                        showMsg("系统错误请联系管理员")
                    }
                })
            }
        }
        var throttleFun = throttle(clickFun, 2000)
        $(".tijiao").on("click", throttleFun)
    </script>
</body>

</html>